<template>
	<div class="songermusi" v-if="!!songermusi">
		<div class="beijing">
			<MusiImg class="bgImg" :src="imgList1.pic_premium"></MusiImg>
			<ul class="header">
				<li @click="out2" class="frist"><img src="../images/leftic.png" /></li>
				<li class="seacon"><span>{{imgList1.author}}</span></li>
				<li class="three fr"><img src="../images/sandian.png" class="kuang" /></li>
			</ul>
			<ul class="box">
				<li class="bofangkey">
					<div class="kuangt">
						<img :src="Img" />
					</div>
				</li>
				<li><span>播放歌曲</span></li>
			</ul>
		</div>
		<ul class="boxss">
			<li @click="out3(index)" v-for="item,index in imgList">
				<p>
					<MusiImg :src="item.pic_small"></MusiImg>
				</p>
				<p>
					<span>{{item.title}}</span>
					<br>
					<span class="timessss">{{item.author}}</span>
				</p>
			</li>
		</ul>
		<div class="footer">

		</div>
	</div>
</template>

<script>
	import jsonp from "jsonp";
	import MusiImg from "./img";
	export default {
		name: "songermusi",
		data() {
			return {
				Img: "../images/stop.png",
				songermusi: "",
			}
		},
        components:{
        	MusiImg,
        },
        computed:{
        	imgList(){
        		return this.songermusi.songlist
        	},
        	imgList1(){  
        		return this.songermusi.songlist[6]
        	},
        },
        methods:{
        	out2() { 
				this.$router.push("/child2");
			},
			out3(index) {
				this.$router.push("/play");
				var songId = this.imgList[index].song_id;
				var song = this.imgList[index];
				var songIdx = this.index;
				var lileng = this.imgList.length;
				this.$store.commit("changessong", song);
				this.$store.commit("changeSonglileng", lileng);
				this.$store.commit("changeSongids", index);
				jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting/?method=baidu.ting.song.play&songid=" + songId, null, (err, res) => {
					if(err) {
					} else {
						this.$store.commit("changeSong", res.bitrate.file_link);
						this.$store.commit("changeSongname", res.songinfo.title);
						this.$store.commit("changeSongautro", res.songinfo.author);
						this.$store.commit("changeSongpic", res.songinfo.pic_small);
						this.$store.commit("changeSongpicbig", res.songinfo.pic_small);
						this.$store.commit("changeSongsj", res.songinfo.file_duration);
					}
				})
			},
		},
		created() {
			var tinuId = this.$store.state.tinuId;
			jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.artist.getSongList&format=jsonℴ=2&tinguid="+tinuId+"&offset=0&limits=50", null, (err, res) => {
					if(err){
                    console.log(err)
                }else{
                    this.songermusi = res;
                }
			})
        },
        mounted(){
        	
        },
	}
</script>

<style scoped lang="scss">
	body {
		/*z-index: -2;*/
	}
	
	.songermusi {
		width: 100%;
		height: 100%;
		/*z-index: -1;*/
		.beijing {
			width: 100%;
			height: 280px;
			position: relative;
			.bgImg {
				width: 100%;
				height: 280px;
				overflow: hidden;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.header {
				width: 100%;
				position: absolute;
				top: 30px;
				right: 20px;
				li {
					display: inline-block;
				}
				.frist {
					width: 11px;
					height: 19px;
					padding-left: 40px;
					vertical-align: middle;
					margin-top: 6px;
					img {
						width: 100%;
					}
				}
				.seacon {
					vertical-align: middle;
					margin-top: 6px;
					span {
						font-size: 20px;
						margin-left: 25px;
					}
				}
				.three {
					width: 38px;
					height: 38px;
					border-radius: 50%;
					border: 1px solid white;
					text-align: center;
					.kuang {
						width: 9px;
						height: 20px;
						margin-top: 9px;
						img {
							width: 100%;
						}
					}
				}
				.clear {
					clear: both;
				}
			}
			.box {
				width: 100%;
				height: 75px;
				background: rgba(0, 0, 0, .3);
				padding-left: 15px;
				position: absolute;
				bottom: 0;
				left: 0;
				li {
					display: inline-block;
					vertical-align: middle;
					line-height: 75px;
				}
				.bofangkey {
					width: 35px;
					height: 35px;
					border-radius: 50%;
					border: 1px solid white;
					.kuangt {
						width: 14px;
						height: 19px;
						transform: translate(80%, -80%);
						/*position: absolute;
						top: -9999px;
						bottom: -9999px;
						left: -9999px;
						right: -9999px;
						margin: auto;*/
						img {
							width: 100%;
							
						}
					}
				}
				span {
					font-size: 20px;
				}
			}
		}
		.boxss {
			width: 100%;
			z-index: 9999;
			overflow-y: auto;
			height: 60%;
			background: #FF6600;
			li {
				width: 100%;
				height: 75px;
				padding: 2% 0;
				background: rgba(0, 0, 0, .6);
				border-bottom: 1px solid chocolate;
				p {
					display: inline-block;
				}
				p:nth-child(1) {
					width: 60px;
					height: 60px;
					transform: translate(15%, 15%);
					img {
						width: 100%;
						height: 100%;
					}
				}
				p:nth-child(2) {
					margin-left: 16px;
					width: 75%;
					overflow: hidden; 
					text-overflow: ellipsis;
					white-space: nowrap;
					span {
						font-size: 17px;
						color: white;
						padding-top: 8px;
					}
					.timessss {
						font-size: 15px;
					}
				}
			}
		}
	}
</style>